<template>
  <div class="topbar-wrapper">
    <el-row :gutter="0" class="container">
      <el-col :span="19" class="topbar-left">
        <ul class="topbar-left-list">
          <a
            :href="getFullPath(item.href)"
            v-for="item in navList"
            :key="item.id"
          >
            <li class="topbar-list-item">{{ item.name }}</li>
          </a>
          <a href="/#/shop">
            <el-dropdown size="large">
              <span class="el-dropdown-link" style="border: none; outline: 0">
                <li class="topbar-list-item">下载app </li>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <div class="download-app">
                      <a href="https://www.mi.com/appdownload">
                        <img
                          style="width: 90px; height: 90px"
                          src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1"
                          alt="download-app"
                          loading="lazy"
                        />
                        <p>小米商城app</p>
                      </a>
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </a>
          <a href="/#/shop">
            <li class="topbar-list-item">Select Location</li>
          </a>
        </ul>
      </el-col>
      <el-col :span="5" class="topbar-right">
        <el-row class="topbar-right-contanier">
          <el-col :span="14" v-if="!userWasLogin">
            <div class="topbar-auth-list">
              <router-link :to="{ name: 'accredit', query: { type: 'login' } }">
                <span class="topbar-auth-item">登录</span>
              </router-link>
              <router-link
                :to="{ name: 'accredit', query: { type: 'register' } }"
              >
                <span class="topbar-auth-item">注册</span>
              </router-link>
              <span class="topbar-auth-item">消息通知</span>
            </div>
          </el-col>
          <el-col :span="10">
            <div
              class="shop-cart-wrapper"
              @click="goToShopCart"
              @mouseenter="showCartList"
              @mouseleave="hideCartList"
            >
              <el-icon :size="14"><ShoppingCart /></el-icon>
              <span class="shop-cart-text">购物车（{{ cartCount }}）</span>
              <div
                :style="{ display: cartChecked ? 'block' : 'none' }"
                class="shop-cart-message animate__animated animate__fadeInDown"
              >
                购物车中还没有商品，赶紧选购吧！
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from "vue";
  import { NavList } from "../../../types/Home";
  import httpClient from "../../../utils/http";
  import { getFullPath } from "@/utils/path";

  const mockNavlist: NavList[] = [
    { id: 1, name: "小米官网", href: "/" },
    { id: 2, name: "小米商城", href: "/#/shop" },
    { id: 3, name: "小米澎湃OS", href: "/#/hyperos" },
    { id: 4, name: "小米汽车", href: "/#/car" },
    { id: 5, name: "云服务", href: "https://i.mi.com/" },
    { id: 6, name: "IoT", href: "https://iot.mi.com/" },
    { id: 7, name: "有品", href: "https://www.xiaomiyoupin.com/" },
    { id: 8, name: "小爱开放平台", href: "/xiaoai" },
    { id: 9, name: "资质证照", href: "/location" },
    {
      id: 10,
      name: "协议规则",
      href: "/https://www.mi.com/shop/aptitude/list",
    },
  ];
  const navList = ref<NavList[]>([]);
  const cartCount = ref(0);
  const userWasLogin = ref(false);
  const cartChecked = ref(false);

  const router = useRouter();

  const goToShopCart = () => {
    console.log(userWasLogin.value, "xxx");

    if (userWasLogin.value) {
      router.push("/shop/buy/cart");
    } else {
      router.push("/auth?type=login");
    }
  };

  const showCartList = () => {
    cartChecked.value = true;
  };

  const hideCartList = () => {
    cartChecked.value = false;
  };

  onMounted(() => {
    navList.value = mockNavlist;
    const userInfo = localStorage.getItem("userInfo");
    if (userInfo && userInfo === "user was login") {
      userWasLogin.value = true;
    }

    httpClient.get("shop/topbar").then((res) => {
      if (res.data.code === 200) {
        navList.value = res.data.data.navList;
      }
    });
  });
</script>

<style scoped lang="scss">
  @use "@/styles/variable" as *;

  .topbar-wrapper {
    position: relative;
    z-index: 30;
    height: 40px;
    font-size: 12px;
    color: $bsDark;
    background: $bsGray;
  }

  .container {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
  }

  .topbar-right-contanier {
    height: 100%;
  }

  .topbar-left-list,
  .topbar-auth-list {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 100%;
    white-space: nowrap;

    .topbar-list-item,
    .topbar-auth-item {
      min-width: auto;
      padding: 6px;
      list-style: none;
      color: $bsDark;
      line-height: 40px;
      cursor: pointer;
      display: inline-block;
      font: $bsFont;
      font-size: 12px;
    }

    :hover {
      color: $bsWhite;
    }
  }

  .shop-cart-wrapper {
    position: relative;
    width: 120px;
    z-index: 32;
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #424242;
    cursor: pointer;
  }

  .shop-cart-wrapper:hover {
    background: $bsWhite;
    color: $themeColor !important;
  }

  .shop-cart-text {
    vertical-align: center;
    font: $bsFont;
    font-size: 12px;
    padding: 5px;
  }

  .shop-cart-message {
    position: absolute;
    top: 40px;
    right: 0px;
    width: 320px;
    height: 100px;
    background: $bsWhite;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 100;
    padding: 30px;
    color: #373434 !important;
  }

  .download-app {
    cursor: pointer;

    a {
      text-decoration: none;
    }

    p {
      font: $bsFont;
    }
  }
</style>
